<template>
  <div class="index">
    <div class="secondaryTitle secondaryTitleTheme">认证附件</div>
    <div class="applyInfoBox">
      <el-row class="imgBoxs clearfix">
        <div
          class="itemBox"
          v-if="
            this.company.departmentType == '0' ||
            this.company.departmentType == '15'
          "
        >
          <div class="imgBox licenseBox">
            <el-image
              style="width: 125.3px; height: 177px"
              :src="licenseImg"
              :preview-src-list="licenseList"
            >
            </el-image>
          </div>
          <span>营业执照</span>
        </div>
        <div
          class="itemBox"
          v-if="
            this.company.departmentType == '5' ||
            this.company.departmentType == '10'
          "
        >
          <div class="imgBox licenseBox">
            <el-image
              style="width: 125.3px; height: 177px"
              :src="affiltatedCertificateUrl"
              :preview-src-list="affiltatedCertificateUrlList"
            >
            </el-image>
          </div>
          <span>单位登记证书</span>
        </div>
        <div
          class="itemBox"
          v-if="
            this.company.departmentType == '0' ||
            this.company.departmentType == '15'
          "
        >
          <div class="imgBox idcardBox">
            <el-image
              style="width: 172.4px; height: 107px"
              :src="idcardFront"
              :preview-src-list="idcardList1"
            >
            </el-image>
          </div>
          <span v-if="this.company.departmentType == '0'">法人身份证正面</span>
          <span v-if="this.company.departmentType == '15'"
            >经营者身份证正面</span
          >
        </div>
        <div
          class="itemBox"
          v-if="
            this.company.departmentType == '0' ||
            this.company.departmentType == '15'
          "
        >
          <div class="imgBox idcardBox">
            <el-image
              style="width: 172.4px; height: 107px"
              :src="idcardBack"
              :preview-src-list="idcardList2"
            >
            </el-image>
          </div>
          <span v-if="this.company.departmentType == '0'">法人身份证反面</span>
          <span v-if="this.company.departmentType == '15'"
            >经营者身份证反面</span
          >
        </div>
      </el-row>
    </div>
    <div class="secondaryTitle secondaryTitleTheme">其他附件</div>
    <div v-for="(cvalue, ckey, cindex) in company" :key="cindex">
      <div v-if="ckey == 'regulationsFiles'" class="title_type">
        <span class="title_type_title">1.企业规则制度</span>
        <div
          v-for="(value, key, index) in cvalue"
          class="sub_title_name"
          :key="index"
        >
          <i class="el-icon-document links"></i>
          <span class="name">{{ value.name || getName(value.url) }}</span>
          <div class="box_btn">
            <el-link type="primary" @click="lookResult(value)">查看</el-link>
            <el-image
              v-if="checkImg(value)"
              class="previewImg"
              style="width: 56px; height: 0px"
              :src="src"
              :preview-src-list="[src]"
              :id="value.id"
            ></el-image>
            <!--                        <el-link v-if="!isJC" type="danger" style="margin-left: 30px;" @click="delFile(value,'regulationsFiles')">删除</el-link>-->
          </div>
        </div>
      </div>
      <div v-if="ckey == 'laborDispatchFiles'" class="title_type">
        <span class="title_type_title">2.劳务派遣许可证</span>
        <div
          v-for="(value, key, index) in cvalue"
          class="sub_title_name"
          :key="index"
        >
          <i class="el-icon-document links"></i>
          <span class="name">{{ value.name || getName(value.url) }}</span>
          <div class="box_btn">
            <el-link type="primary" @click="lookResult(value)">查看</el-link>
            <el-image
              v-if="checkImg(value)"
              class="previewImg"
              style="width: 56px; height: 0px"
              :src="src"
              :preview-src-list="[src]"
              :id="value.id"
            ></el-image>
            <!--                        <el-link v-if="!isJC" type="danger" style="margin-left: 30px;" @click="delFile(value,'laborDispatchFiles')">删除</el-link>-->
          </div>
        </div>
      </div>
      <div v-if="ckey == 'unionReplyFiles'" class="title_type">
        <span class="title_type_title">3.工会上级批复附</span>
        <div
          v-for="(value, key, index) in cvalue"
          class="sub_title_name"
          :key="index"
        >
          <i class="el-icon-document links"></i>
          <span class="name">{{ value.name || getName(value.url) }}</span>
          <div class="box_btn">
            <el-link type="primary" @click="lookResult(value)">查看</el-link>
            <el-image
              v-if="checkImg(value)"
              class="previewImg"
              style="width: 56px; height: 0px"
              :src="src"
              :preview-src-list="[src]"
              :id="value.id"
            ></el-image>
            <!--                        <el-link v-if="!isJC" type="danger" style="margin-left: 30px;" @click="delFile(value,'unionReplyFiles')">删除</el-link>-->
          </div>
        </div>
      </div>
      <div v-if="ckey == 'collectiveContractFiles'" class="title_type">
        <span class="title_type_title">4.集体合同</span>
        <div
          v-for="(value, key, index) in cvalue"
          class="sub_title_name"
          :key="index"
        >
          <i class="el-icon-document links"></i>
          <span class="name">{{ value.name || getName(value.url) }}</span>
          <div class="box_btn">
            <el-link type="primary" @click="lookResult(value)">查看</el-link>
            <el-image
              v-if="checkImg(value)"
              class="previewImg"
              style="width: 56px; height: 0px"
              :src="src"
              :preview-src-list="[src]"
              :id="value.id"
            ></el-image>
            <!--                        <el-link v-if="!isJC" type="danger" style="margin-left: 30px;" @click="delFile(value,'collectiveContractFiles')">删除</el-link>-->
          </div>
        </div>
      </div>
      <div v-if="ckey == 'salaryAgreementFiles'" class="title_type">
        <span class="title_type_title">5.工资集体协议</span>
        <div
          v-for="(value, key, index) in cvalue"
          class="sub_title_name"
          :key="index"
        >
          <i class="el-icon-document links"></i>
          <span class="name">{{ value.name || getName(value.url) }}</span>

          <div class="box_btn">
            <el-link type="primary" @click="lookResult(value)">查看</el-link>
            <el-image
              v-if="checkImg(value)"
              class="previewImg"
              style="width: 56px; height: 0px"
              :src="src"
              :preview-src-list="[src]"
              :id="value.id"
            ></el-image>
            <!--                        <el-link v-if="!isJC" type="danger" style="margin-left: 30px;" @click="delFile(value,'salaryAgreementFiles')">删除</el-link>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'attachmentInfo',
  props: {
    company: {
      type: Object,
      required: true,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      licenseImg: '',
      idcardFront: '',
      idcardBack: '',
      affiltatedCertificateUrl: '',
      licenseList: [],
      idcardList1: [],
      idcardList2: [],
      affiltatedCertificateUrlList: [],
      marker: 0,
      src: '',
      isJC: false,
    }
  },
  created() {
    this.isJC = localStorage.getItem('loginType') === 'JC'
    this.licenseImg = this.company.businessLicenseImgFile
    this.licenseList.push(this.company.businessLicenseImgFile)
    this.idcardFront = this.company.bossIDCardFrontImgFile
    this.idcardList1.push(this.company.bossIDCardFrontImgFile)
    this.idcardBack = this.company.bossIDCardBackImgFile
    this.idcardList2.push(this.company.bossIDCardBackImgFile)
    this.affiltatedCertificateUrl = this.company.affiltatedCertificateFile
    this.affiltatedCertificateUrlList.push(
      this.company.affiltatedCertificateFile
    )
  },
  activated() {
    this.licenseImg = this.company.businessLicenseImgFile
    this.licenseList.push(this.company.businessLicenseImgFile)
    this.idcardFront = this.company.bossIDCardFrontImgFile
    this.idcardList1.push(this.company.bossIDCardFrontImgFile)
    this.idcardBack = this.company.bossIDCardBackImgFile
    this.idcardList2.push(this.company.bossIDCardBackImgFile)
    this.affiltatedCertificateUrl = this.company.affiltatedCertificateFile
    this.affiltatedCertificateUrlList.push(
      this.company.affiltatedCertificateFile
    )
  },
  methods: {
    checkImg(item) {
      var str = item.name || this.getName(item.url)
      if (str) {
        let arr = str.split('.')
        let name = arr[arr.length - 1]
        if (['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG'].includes(name)) {
          return true
        }
      }
      return false
    },
    lookResult(item) {
      if (this.checkImg(item)) {
        this.src = item.url
        setTimeout(() => {
          $('#' + item.id).click()
        }, 300)
      } else {
        window.open(item.url)
      }
    },
    getName(url) {
      if (url) {
        const fileName = url.lastIndexOf('/') // 取到文件名开始到最后一个点的长度
        const fileNameLen = url.length // 取到文件名长度
        const fileType = url.substring(fileName + 1, fileNameLen) // 截
        return fileType
      }
    },
    delFile(fileVo, fileType) {
      let data
      if (fileType === 'regulationsFiles') {
        data = { regulationsFiles: JSON.stringify(fileVo) }
      }
      if (fileType === 'laborDispatchFiles') {
        data = { laborDispatchFiles: JSON.stringify(fileVo) }
      }
      if (fileType === 'unionReplyFiles') {
        data = { unionReplyFiles: JSON.stringify(fileVo) }
      }
      if (fileType === 'collectiveContractFiles') {
        data = { collectiveContractFiles: JSON.stringify(fileVo) }
      }
      if (fileType === 'salaryAgreementFiles') {
        data = { salaryAgreementFiles: JSON.stringify(fileVo) }
      }
      this.axios({
        method: 'post',
        url: 'api-c/company/expand/modifycompanydetailfile',
        data,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '删除成功',
            })
            this.delFileData(fileVo, fileType)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    delFileData(fileVo, fileType) {
      if (fileType === 'regulationsFiles') {
        this.delData(this.company.regulationsFiles, fileVo)
      }
      if (fileType === 'laborDispatchFiles') {
        this.delData(this.company.laborDispatchFiles, fileVo)
      }
      if (fileType === 'unionReplyFiles') {
        this.delData(this.company.unionReplyFiles, fileVo)
      }
      if (fileType === 'collectiveContractFiles') {
        this.delData(this.company.collectiveContractFiles, fileVo)
      }
      if (fileType === 'salaryAgreementFiles') {
        this.delData(this.company.salaryAgreementFiles, fileVo)
      }
    },
    delData(arr, fileVo) {
      var length = arr.length
      for (var i = 0; i < length; i++) {
        if (arr[i] == fileVo) {
          arr.splice(i, 1)
        }
      }
    },
    getName(url) {
      if (url) {
        const fileName = url.lastIndexOf('/') // 取到文件名开始到最后一个点的长度
        const fileNameLen = url.length // 取到文件名长度
        const fileType = url.substring(fileName + 1, fileNameLen) // 截
        return fileType
      }
    },
  },
}
</script>

<style scoped lang="less">
.index {
  // padding: 0 24px;
  .secondaryTitle {
    margin: 20px 24px;
  }
}
.label {
  background-color: #f2f2f2;
  color: #393939;
  padding: 10px;
}
.applyInfoBox {
  margin-top: 25px;

  .yellow {
    color: #f9a243;
  }

  .imgBoxs {
    padding: 24px;
    text-align: center;
    position: relative;
    &::after {
      position: absolute;
      right: 0px;
      bottom: 0;
      left: 0px;
      height: 1px;
      content: '';
      width: 100%;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      z-index: 10;
    }
    .itemBox {
      font-size: 14px;
      display: inline-block;
      margin-right: 54px;

      .imgBox {
        width: 200px;
        height: 200px;
        background: rgba(222, 229, 244, 0.3);
        margin-bottom: 10px;

        span {
          color: #333;
          font-size: 14px;
        }
      }

      .licenseBox {
        .el-image {
          margin-top: 11.5px;
        }
      }

      .idcardBox {
        .el-image {
          margin-top: 46.5px;
        }
      }
    }

    .itemBox:nth-child(3) {
      margin-right: 0px;
    }
  }
}
.title_type {
  margin-left: 38px;
  margin-bottom: 20px;

  font-size: 14px;
  &_title {
    font-weight: 500;
    color: #333;
  }
}
.sub_title_name {
  padding-left: 10px;
  margin-top: 15px;
  margin-left: 15px;
  width: 400px;
  color: #333;
  line-height: 26px;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  .name {
    width: 320px;
    padding-left: 5px;
    display: inline-block;
  }
  &:hover {
    background-color: #f5f7fa;
    .name {
      color: #409eff;
    }
  }
}
.box_btn {
  display: inline-block;
  .previewImg {
    position: absolute;
    top: 20px;
    left: 0;
    cursor: pointer;
    /deep/.el-image__preview {
      opacity: 1;
    }
  }
  /deep/.el-upload-list {
    display: none;
  }
}
</style>
